<template>
  <div class="select-none">
    <img :src="bg" class="wave" />
    <div class="login-container">
      <div class="img" />
      <div class="login-box">
        <div class="login-form">
          <div style="display: flex; justify-content: center">
            <img src="/public/111.png" style="width: 200px" />
          </div>
          <Motion>
            <h2 class="outline-none">{{ setting.title }}</h2>
          </Motion>
          <component :is="Account" ref="account" />
          <Motion :delay="250">
            <el-button
              class="w-full mt-4"
              size="default"
              type="primary"
              :loading="loading"
              @click="submitForm()"
            >
              登录
            </el-button>
          </Motion>
          <Motion :delay="250">
            <el-form-item prop="refresh">
              <el-checkbox v-model="refresh">7天内免登录</el-checkbox>
            </el-form-item>
          </Motion>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Motion from "@/components/motion/motion";
import bg from "@/assets/login/bg.png";
import Account from "./components/account.vue";
import { onBeforeUnmount, onMounted, ref } from "vue";
import { useSettingHooks } from "@/core/pinia/store/setting.store";
import { useMenuHooks } from "@/core/pinia/store/menu.store";
import { useRoute, useRouter } from "vue-router";
import { Init } from "@/core/start/init";
import { login } from "@/core/api/oauth/oauth";
import { LoginExposeOption } from "../interface";
import { useUserHooks } from "@/core/pinia/store/user.store";
defineOptions({
  name: "Login"
});
const setting = useSettingHooks();
const refresh = ref(true);
const menuHooks = useMenuHooks();
const loading = ref(false);
const route = useRoute();
const router = useRouter();
const account = ref<LoginExposeOption>();
const userHooks = useUserHooks();
const reloadRoute = async () => {
  await Init.of().reload();
  const path = route.query?.["recurit_url"] as string;
  console.log(decodeURI(path), menuHooks.getDefaultActive?.router);
  router.replace({
    path: decodeURI(path) || menuHooks.getDefaultActive?.router
  });
};
/** 使用公共函数，避免`removeEventListener`失效 */
const submitForm = async () => {
  const data = await account.value.validateData();
  if (data) {
    loading.value = true;
    data.refresh = refresh.value;
    login(data)
      .then(r => {
        userHooks.setOauth2Params(r);
        reloadRoute();
      })
      .finally(() => {
        loading.value = false;
        setting.clearAllCachePage();
      });
  }
};
const onkeypress = ({ code }: KeyboardEvent) => {
  if (code === "Enter") {
    submitForm();
  }
};

onMounted(() => {
  window.document.addEventListener("keypress", onkeypress);
});

onBeforeUnmount(() => {
  window.document.removeEventListener("keypress", onkeypress);
});
</script>

<style scoped>
@import url("@/style/login.css");
</style>

<style lang="scss" scoped>
:deep(.el-input-group__append, .el-input-group__prepend) {
  padding: 0;
}
</style>
